<template>
  <!--<div class="swiper-container">-->
  <!--<div class="swiper-wrapper">-->
  <!--<div class="swiper-slide" v-for="str in img" @click="imgclick(str.adver_link)">-->
  <!--<img :src="str.adver_cover" alt="">-->
  <!--</div>-->
  <!--</div>-->
  <!--<div class="swiper-pagination swiper-pagination-white"></div>-->
  <!--</div>-->
  <div class="bannercon">
    <div v-if="img.lenght>1">
      <swiper :options="obj" ref="mySwiper" @someSwiperEvent="callback">
        <!-- slides -->
        <swiper-slide v-for="(str,i) in img" :key="i">
          <img :src="str.adver_cover" @click="imgclick(str.adver_link)" alt="">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
        <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
        <!--<div class="swiper-button-next" slot="button-next"></div>-->
        <!--<div class="swiper-scrollbar" slot="scrollbar"></div>-->
      </swiper>
    </div>
    <div v-else>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="str in img" @click="imgclick(str.adver_link)">
            <img :src="str.adver_cover" alt="">
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-white"></div>
      </div>
    </div>
  </div>
</template>

<script>
  // import Swiper from 'swiper';
  // import 'swiper/dist/css/swiper.css'

  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.min.css';
  import Json from '../../Json/a.json'

  export default {
    name: 'index',
    data: function () {
      return {
        listImg: Json,
        height: 150,
        obj: {
          // paginationClickable: false,
          loop: true,
          speed: 600,
          parallax: true,
          autoplay: true,
          delay: 1000,
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    },
    props: ['ImgObj'],
    computed: {
      img: {
        get: function () {
          this.obj.autoplay = this.ImgObj.length === 1 ? false : true
          return this.ImgObj
        }
      }
    },
    mounted: function () {
      // var _this = this
      // var Timeout = setTimeout(() => {
      //   if (_this.ImgObj.length === 1) {
      //     clearTimeout(Timeout)
      //   } else {
      //     _this.lubo()
      //   }
      // }, 300)
      // this.swiper.slideTo(3, 1000, false)
    },
    methods: {
      callback: function () {
      },
      lubo: function () {
        // var swiper = new Swiper('.swiper-container', {
        //   // pagination: '.swiper-pagination',
        //   paginationClickable: false,
        //   loop: true,
        //   speed: 600,
        //   parallax: true,
        //   autoplay: true,
        //   delay: 1000,
        //   pagination: {
        //     el: '.swiper-pagination',
        //   },
        //   onTouchEnd: function () {
        //     swiper.startAutoplay()
        //   }
        // })
      },
      imgclick: function (href) {
        if (href === '' || href === -1 || href === '-1') {
          return
        }
        window.location.href = href
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style scoped>
  @import "../../assets/css/components/Banner/index.css";
</style>
